
<template>
    <div>
        <div class="clearfix">
            <Form class="padding-right-15 margin-top-5" :label-width="130"  ref='pickUpData' :model='formData'>
                <Row>
                    <Col span="24">
                        <FormItem prop='dispatchDate' label="取件日期" :rules='required'>
                            <Select v-model="formData.dispatchDate" @on-change="chooseDate">
                                <Option v-for="(item,index) in dispatchDateList" :key="index" :value="item.pickupDate">{{item.pickupDate}}</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="24">
                        <FormItem prop='accessHour' label="时间间隔">
                            <div>{{ accessHour }} （h）</div>
                        </FormItem>
                    </Col>
                    <Col span="24">
                        <FormItem prop='startTime' label="开始时间" :rules='required'>
                            <TimePicker v-model="formData.startTime" format="HH:mm" :steps="[1, 30]" :disabled-hours="startHours" hide-disabled-options @on-change="chooseStartTime" style="width: 100%" />
                        </FormItem>
                    </Col>
                    <Col span="24">
                        <FormItem prop='endTime' label="结束时间" :rules='required'>
                            <TimePicker v-model="formData.endTime" format="HH:mm" :steps="[1, 30]" :disabled-hours="endHours" hide-disabled-options @on-change="chooseEndTime" style="width: 100%" />
                        </FormItem>
                    </Col>
                    <Col span="24">
                        <FormItem prop='remark' label="备注" >
                            <Input v-model="formData.remark" type="textarea" rows="4"/>
                        </FormItem>
                    </Col>
                </Row>
            </Form>
        </div>
        <div class="text-right">
            <Button type="primary" class="margin-right-10" @click="submit">{{$ct('global.modal.confirm', { defaultValue: "确定" })}}</Button>
            <Button @click="cancel">{{$ct('global.common.operate_cancel', { defaultValue: "取消" })}}</Button>
        </div>
		<Spin size="large" fix v-if="loading"></Spin>
    </div>
</template>

<script>
import { HttpCarrierGetDate, HttpCarrierPickUP } from '@/service/api/views';
export default {
    props:['resoureData', 'activeId'],
    data(){
        return {
			id: this.activeId,
            loading: false,
            formData: {},
            required: [{
                required: true,
                message: "该信息不能为空,请填写"
            }],
            accessHour: 0,
            startHourEarly: 0,  // 最早开始时间
            startHourLate: 23, // 最晚开始时间
            endHourLate: 23,    // 最晚结束时间
            startHours: [], // 开始时间禁用
            endHours: [],   // 结束时间禁用
            dispatchDateList: [],   // 取件日期
        }
    },
    created(){
        this.getTime()
    },
    computed:{
    },
    methods:{
        async getTime(){
            this.loading = true;
            await HttpCarrierGetDate(this.resoureData).then(res => {
                this.dispatchDateList = res.data.availabilityItems;
                this.startHourEarly = res.data.openTime;
                this.endHourLate = res.data.closeTime;
                this.loading = false;
            }, err => {
                this.loading = false;
                this.$Message.error(err.message);
			});
        },
        chooseDate(val){
            if(val){
                this.formData.startTime = '';
                this.formData.endTime = '';
                const openEarlyTime = this.getHour(this.startHourEarly);
                const closeLateTime = this.getHour(this.endHourLate)
                const chooseArr = this.dispatchDateList.filter(item=>item.pickupDate == val)[0];
                this.startHourLate = chooseArr.cutOffTime;
                this.accessHour = chooseArr.accessHour;
                const openLateTime = this.getHour(chooseArr.cutOffTime);
                for( let i= 0; i< 24; i++){
                    if(i< openEarlyTime || i> openLateTime){
                        this.startHours.push(i);
                    }
                    if(i< openEarlyTime || i>closeLateTime){
                        this.endHours.push(i)
                    }
                }
            }
        },
        chooseStartTime(val){
            console.log('val', this.compareTime(this.startHourEarly, val))
            if(val){
                if(this.compareTime(this.startHourEarly, val)){
                    this.formData.startTime = this.startHourEarly;
                    this.$Message.error(`开始时间最早为${this.startHourEarly}`);
                    return
                }
                if(this.compareTime(val, this.startHourLate)){
                    this.formData.startTime = this.startHourEarly;
                    this.$Message.error(`开始时间最晚为${this.startHourLate}`);
                    return
                }
            }
        },
        chooseEndTime(val){
            if(val){
                const time = this.accessHour*3600;
                if(this.timeToSec(val) - this.timeToSec(this.formData.startTime) < time){
                    const h = Number(this.formData.startTime.split(':')[0]) + Number(this.accessHour);
                    const m = this.formData.startTime.split(':')[1];
                    const s = this.formData.startTime.split(':')[2];
                    this.formData.endTime = `${h}:${m}:${s}`;
                    this.$Message.error(`开始时间与结束时间不得小于${this.accessHour}h`);
                    return
                }
            }
        },
        getHour(time){
            if(time){
                return Number(time.slice(0,2))
            }
        },
        compareTime(time1, time2){
            return this.timeToSec(time1) > this.timeToSec(time2);
        },
        timeToSec(time){
            if(time){
                let hour = time.split(':')[0];
                let min = time.split(':')[1];
                let sec = time.split(':')[2] || 0;
                const total = Number(hour*3600) + Number(min*60) + Number(sec)
                return total
            }
        },
        async submit(){
            const valid = await this.$refs.pickUpData.validate();
			if(!valid) {
                return;
            }
            const readyTime = this.formData.dispatchDate.concat(' ',this.formData.startTime,':00')
            const closeTime = this.formData.dispatchDate.concat(' ',this.formData.endTime,':00')
            this.loading = true;
            HttpCarrierPickUP({labelId: this.id, readyTime, closeTime, remark: this.formData.remark}).then(res => {
                this.loading = false;
                this.$Message.success(res.message);
                this.$emit('on-success')
            }, err => {
                this.loading = false;
                this.$Message.error(err.message);
			});
        },
        cancel(){
            this.$emit('on-close')
        },
    }
}
</script>
